<template>
  <div class="customer-analysis-container">
    <div class="page-header">
      <h1 class="page-title">客户行为分析</h1>
      <el-button type="primary" @click="$router.push('/')">
        <el-icon><Back /></el-icon>
        返回首页
      </el-button>
    </div>

    <!-- 客户概览卡片部分 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :xs="24" :sm="12" :md="6" v-for="(item, index) in overviewData" :key="index">
        <el-card class="overview-card" shadow="hover">
          <el-statistic :title="item.title" :value="item.value">
            <template #suffix>
              <span v-if="item.suffix">{{ item.suffix }}</span>
            </template>
          </el-statistic>
          <div class="trend-info" :class="item.trend">
            <el-icon v-if="item.trend === 'up'"><ArrowUp /></el-icon>
            <el-icon v-else-if="item.trend === 'down'"><ArrowDown /></el-icon>
            {{ item.rate }}% 较上月
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表部分 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>客户地域分布</span>
              <el-radio-group v-model="regionDataType" size="small">
                <el-radio-button label="province">省份</el-radio-button>
                <el-radio-button label="city">城市</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="客户地域分布图表将根据实际数据呈现"></el-empty>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>客户行业分布</span>
              <el-select v-model="industryTimeRange" placeholder="选择时间段" size="small">
                <el-option label="近30天" value="30days"></el-option>
                <el-option label="近90天" value="90days"></el-option>
                <el-option label="近365天" value="365days"></el-option>
              </el-select>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="客户行业分布图表将根据实际数据呈现"></el-empty>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>客户消费趋势</span>
              <el-select v-model="consumptionPeriod" placeholder="选择周期" size="small">
                <el-option label="每周" value="weekly"></el-option>
                <el-option label="每月" value="monthly"></el-option>
                <el-option label="每季度" value="quarterly"></el-option>
              </el-select>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="客户消费趋势图表将根据实际数据呈现"></el-empty>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>客户留存分析</span>
              <el-tooltip content="客户第一次购买后在后续时间段内继续购买的比例">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="客户留存分析图表将根据实际数据呈现"></el-empty>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 高价值客户列表 -->
    <el-card shadow="hover" class="valuable-customers">
      <template #header>
        <div class="card-header">
          <span>高价值客户</span>
          <el-button type="text" @click="$router.push('/sales/customers')">查看全部客户</el-button>
        </div>
      </template>
      <el-table :data="valuableCustomers" style="width: 100%" stripe>
        <el-table-column prop="customer_name" label="客户名称"></el-table-column>
        <el-table-column prop="total_amount" label="累计消费" width="150">
          <template #default="{row}">
            ¥{{ row.total_amount }}
          </template>
        </el-table-column>
        <el-table-column prop="orders_count" label="订单数" width="100"></el-table-column>
        <el-table-column prop="last_order_date" label="最近购买" width="120"></el-table-column>
        <el-table-column prop="avg_order_amount" label="平均订单金额" width="150">
          <template #default="{row}">
            ¥{{ row.avg_order_amount }}
          </template>
        </el-table-column>
        <el-table-column prop="customer_level" label="客户等级" width="120">
          <template #default="{row}">
            <el-tag :type="getCustomerLevelType(row.customer_level)">
              {{ row.customer_level }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { 
  ArrowUp, 
  ArrowDown, 
  Back,
  QuestionFilled
} from '@element-plus/icons-vue';

// 客户概览数据
const overviewData = ref([
  {
    title: '客户总数',
    value: 1253,
    trend: 'up',
    rate: 8.6
  },
  {
    title: '近30天新增',
    value: 156,
    trend: 'up',
    rate: 12.3
  },
  {
    title: '客户平均价值',
    value: 15680,
    suffix: '元',
    trend: 'up',
    rate: 5.7
  },
  {
    title: '客户复购率',
    value: 38.5,
    suffix: '%',
    trend: 'down',
    rate: 2.1
  }
]);

// 区域数据类型
const regionDataType = ref('province');

// 行业时间范围
const industryTimeRange = ref('30days');

// 消费周期
const consumptionPeriod = ref('monthly');

// 高价值客户数据
const valuableCustomers = ref([
  {
    customer_name: '某某科技有限公司',
    total_amount: '356,800.00',
    orders_count: 23,
    last_order_date: '2023-04-28',
    avg_order_amount: '15,513.04',
    customer_level: 'VIP'
  },
  {
    customer_name: '某某电子商务集团',
    total_amount: '298,500.00',
    orders_count: 18,
    last_order_date: '2023-04-30',
    avg_order_amount: '16,583.33',
    customer_level: 'VIP'
  },
  {
    customer_name: '某某医疗科技股份公司',
    total_amount: '215,600.00',
    orders_count: 15,
    last_order_date: '2023-05-01',
    avg_order_amount: '14,373.33',
    customer_level: '金牌'
  },
  {
    customer_name: '某某教育科技有限公司',
    total_amount: '189,300.00',
    orders_count: 12,
    last_order_date: '2023-04-25',
    avg_order_amount: '15,775.00',
    customer_level: '金牌'
  },
  {
    customer_name: '某某物流有限公司',
    total_amount: '165,200.00',
    orders_count: 13,
    last_order_date: '2023-04-29',
    avg_order_amount: '12,707.69',
    customer_level: '银牌'
  }
]);

// 获取客户等级类型
const getCustomerLevelType = (level) => {
  const typeMap = {
    'VIP': 'danger',
    '金牌': 'warning',
    '银牌': 'success',
    '普通': 'info'
  };
  return typeMap[level] || 'info';
};
</script>

<style scoped>
.customer-analysis-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  color: #303133;
  margin: 0;
}

.overview-cards {
  margin-bottom: 24px;
}

.overview-card {
  margin-bottom: 20px;
  padding: 20px;
}

.trend-info {
  margin-top: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.trend-info.up {
  color: #67C23A;
}

.trend-info.down {
  color: #F56C6C;
}

.chart-row {
  margin-bottom: 24px;
}

.chart-card {
  height: 360px;
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.valuable-customers {
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 